a {
    text-decoration: none;
    display: block;
}

.con {
    position: relative;
    width: 400px;
}
.con .item{width: 100%;height: 100%;}

.con .item img {
    width: 100%;
    height: 100%;
}

.play-btn {
    opacity: 0;
    position: absolute;
    width: 56px;
    height: 56px;
    right: 10%;
    bottom: 10%;
    background: url(./images/稍后再看.png) no-repeat center center;
    transition: opacity .5s ease-in-out .5s;
}

.con:hover .play-btn {
    opacity: 1;
}

.mask {
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    transition: ease-in-out .5s all;
    overflow: hidden;
}

.con:hover .mask {
    height: 100%;
}